<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Todo List</h1>
    <input type="text" id="task-input" placeholder="添加新任务">
    <button onclick="addTask()">添加任务</button>
    <ul id="task-list"></ul>

    <script>
        function addTask() {
            const taskInput = document.getElementById('task-input');
            const taskText = taskInput.value.trim();
            if (taskText === '') return;

            const taskList = document.getElementById('task-list');
            const li = document.createElement('li');
            li.className = 'task-item';

            const span = document.createElement('span');
            span.textContent = taskText;
            li.appendChild(span);

            const button = document.createElement('button');
            button.textContent = '删除';
            button.onclick = function() {
                taskList.removeChild(li);
            };
            li.appendChild(button);

            taskList.appendChild(li);
            taskInput.value = '';
        }
    </script>
</body>
</html>